<template>
  <div id="viewProblemView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs>
          <a-tab-pane key="problem" title="题目">
            <a-card v-if="problem" :title="problem.title">
              <a-descriptions bordered :column="{ xs: 1, md: 2, lg: 3 }">
                <a-descriptions-item label="时间限制">
                  {{ problem.judgeConfig?.timeLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  {{ problem.judgeConfig?.memoryLimit ?? 0 }}
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制">
                  {{ problem.judgeConfig?.stackLimit ?? 0 }}
                </a-descriptions-item>
              </a-descriptions>
              <MDView :value="problem.content || ''" />
              <template #extra>
                <a-space>
                  <a-tag
                    v-for="(tag, index) of problem.tags"
                    :key="index"
                    color="cyan"
                    bordered
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" title="讨论区" disabled> 讨论区</a-tab-pane>
          <a-tab-pane key="answer" title="参考答案">
            <a-card v-if="problem">
              <MDView value="暂无参考答案" />
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-card title="编写代码" style="margin-top: 57px">
          <template #extra>
            <a-space>
              <a-select
                v-model="codeForm.language"
                style="width: 150px"
                placeholder="编程语言"
              >
                <a-option>java</a-option>
                <a-option>cpp</a-option>
                <a-option>go</a-option>
              </a-select>
              <a-button
                type="primary"
                style="min-width: 60px"
                @click="doCodeSubmit"
                >提交代码
              </a-button>
            </a-space>
          </template>
          <CodeEditor
            :value="codeForm.code"
            :language="codeForm.language"
            :handle-change="onCodeChange"
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, withDefaults, defineProps } from "vue";
import {
  ProblemControllerService,
  ProblemSubmitAddRequest,
  ProblemSubmitControllerService,
  ProblemVO,
} from "../../generated";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MDView from "@/components/MDView.vue";
import { useStore } from "vuex";
import ACCESS_ENUM from "@/access/accessEnum";
import { useRouter } from "vue-router";

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});

const onCodeChange = (v: string) => {
  codeForm.value.code = v;
};

const problem = ref<ProblemVO>();

const loadData = async () => {
  if (!props.id) {
    return;
  }
  const res = await ProblemControllerService.getProblemVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    problem.value = res.data;
  } else {
    message.error("请求数据失败，" + res.message);
  }
};

const codeForm = ref<ProblemSubmitAddRequest>({
  language: "java",
  problemId: props.id as any,
  code: "",
});

const store = useStore();
const router = useRouter();

const doCodeSubmit = async () => {
  if (
    !store.state.user.loginUser.userRole ||
    store.state.user.loginUser.userRole === ACCESS_ENUM.NOT_LOGIN
  ) {
    await router.push({
      path: "/user/login",
      replace: false,
    });
  }
  const res = await ProblemSubmitControllerService.addProblemSubmitUsingPost(
    codeForm.value
  );
  if (res.code === 0) {
    message.success("代码提交成功");
  } else {
    message.error("代码提交失败，" + res.message);
  }
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
#viewProblemView {
  max-width: 1400px;
  margin: 0 auto;
}

#viewProblemView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
</style>
